<template>
  <div id="box">
    <div id="login">
      <div id="top">东铭后台管理系统</div>
      <div id="bottom">
        <p class="yongH">
          <img src="../../assets/login-imgs/icon03.png" alt="" />
          <input type="text" placeholder="手机号登录" id="sjh" />
        </p>
        <p class="miMa">
          <img src="../../assets/login-imgs/icon05.png" alt="" />
          <input
            class="kuan"
            type="text"
            placeholder="请输入验证码"
            id="yzm1"
          />
          <input class="yzm" :value="yzm" />
        </p>
        <p class="yongH">
          <img src="../../assets/login-imgs/icon04.png" alt="" />
          <input type="password" placeholder="输入新密码" id="mm" />
        </p>
        <p class="yongH">
          <img src="../../assets/login-imgs/icon04.png" alt="" />
          <input type="password" placeholder="确认新密码" id="mm1" />
        </p>
        <p class="login1" @click="handelDl">登录</p>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

export default {
  setup() {
    const router = useRouter()

    const yzm = ref('')
    const ranNum = () => {
      var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f'] //0-14
      var str = ''
      for (var i = 1; i <= 4; i++) {
        //拼接6次，每次随机从数组中获取一个字符。
        var index = parseInt(Math.random() * arr.length) //Math.random()*15
        str += arr[index]
      }
      return str //返回拼接的结果
    }
    const handelDl = () => {
      let a = yzm.value
      let b = document.getElementById('yzm1').value
      let c = document.getElementById('sjh').value

      let miMa1 = document.getElementById('mm').value
      let miMa2 = document.getElementById('mm1').value

      if (a == b) {
        if (miMa1 == miMa2) {
          localStorage.setItem('token', c)
          localStorage.setItem('miMa', miMa1)
          router.replace('/login')
        } else {
          alert('请输入相同的密码')
        }
      } else {
        alert('请输入正确的验证码')
      }
    }

    onMounted(() => {
      yzm.value = ranNum()
    })
    return {
      yzm,
      ranNum,
      handelDl,
    }
  },
}
</script>
<style lang="less" scoped>
#box {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('../../assets/login-imgs/icon01.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  #login {
    display: flex;
    width: 400px;
    height: 500px;
    background: #5f4e72;
    opacity: 0.8;
    flex-direction: column;
    #top {
      margin-top: 30px;
      text-align: center;
      width: 100%;
      font-size: 36px;
      font-family: SourceHanSansSC;
      font-weight: bold;
      color: #fefefe;
    }
    #bottom {
      display: flex;
      flex-direction: column;
      .miMa {
        border-radius: 5px;
        margin-top: 20px;
        text-align: center;
        img {
          margin-right: 20px;
          width: 30px;
          vertical-align: -50%;
          height: 30px;
        }
        .kuan {
          border-radius: 5px;
          width: 120px;
          height: 30px;
          margin-right: 28px;
          text-indent: 5px;
        }
        .yzm {
          border-radius: 5px;
          width: 50px;
          height: 30px;
          text-indent: 5px;
        }
      }
      .yongH {
        margin-top: 20px;
        text-align: center;
        img {
          margin-right: 20px;
          width: 30px;
          vertical-align: -50%;
          height: 30px;
        }
        input {
          border-radius: 5px;
          width: 200px;
          height: 30px;
          text-indent: 5px;
        }
        .result {
          cursor: pointer;
          margin: 10px 0px 10px 200px;
        }
      }
      .login1 {
        cursor: pointer;
        border-radius: 5px;
        width: 250px;
        height: 30px;
        font-family: SourceHanSansSC-Normal;
        margin: 30px 0px 0px 90px;
        text-indent: 5px;
        text-align: center;
        line-height: 30px;
        background-color: #fff;
      }
    }
  }
}
</style>
